<template>
  <v-tips v-if="tips.show" :icon="tips.icon" :msg="tips.msg" />
  <div v-else class="merchant">
    <div class="top row">
      <p class="cc"><img src="@/assets/logo.png" alt="" /></p>
      <div class="flex cc">
        <span class="f18">收钱</span>
        <span class="f12 c9">向[153****1314]付钱</span>
      </div>
    </div>
    <div class="input row">
      <b class="cc f28 w4">￥</b>
      <input
        v-model="value"
        class="flex f26 w5"
        type="text"
        readonly
        placeholder="输入金额"
      />
      <p v-if="allowInput && value != ''" @click="value = ''" class="cc">
        <img src="@/assets/img/close.png" />
      </p>
    </div>
    <div class="foot ct f12 c9"></div>
    <div ref="payUrl" style="height: 0"></div>
    <van-number-keyboard
      :show="allowInput"
      v-model="value"
      theme="custom"
      extra-key="."
      close-button-text="付钱"
      :safe-area-inset-bottom="false"
      @close="payment"
    />
  </div>
</template>

<script>
import utils from "@/utils/index";
export default {
  data: () => ({
    value: "",
    allowInput: false,
    tips: {
      show: false,
      icon: "fail",
      msg: "请在微信或者支付宝中访问",
    },
    payPay: 0,
  }),
  activated() {
    let state = this.$route.query.state || "";
    if (state == "success") {
      this.tips = {
        show: true,
        icon: "success",
        msg: "支付成功",
      };
      if(this.isWebview()){
        window.location.href = "payurl://?state=success";
      }
    }
    if (state == "cancel") {
      this.$toast("取消支付");
    }
    if (state == "fail") {
      this.$toast("支付失败");
    }
  },
  mounted() {
    utils.noBack();

    // 复利
    // var M =200000,i=0.1303,n = 1;
    // console.log(((M*(1+i)^n)-M)/6)

    
    
    if (this.isAlipay()) {
      this.payType = 1;
    } 
    if (this.isWechat()) {
      this.payType = 2;
    }

    let amount = this.$route.query.amount || "";
    if (amount) {
      this.value = amount;
      this.allowInput = false;
    } else {
      this.allowInput = true;
    }
  },
  watch: {
    value(val) {
      // 首位补0
      if (this.value[0] == ".") this.value = "0" + this.value;
      // 判断'.'出现次数，防止出现多次
      if (this.value.split(".").length - 1 == 2) {
        this.value = this.value.substring(0, this.value.length - 1);
      }
      if (this.value.indexOf(".") > -1) {
        //小数点后最多包含两位
        let strArr = this.value.split(".");
        if (strArr[1].length > 2) {
          strArr[1] = strArr[1].substring(0, 2);
        }
        //  小数前面最多输入7位
        if (strArr[0].length > 7) {
          strArr[0] = strArr[1].substring(0, 7);
        }

        this.value = strArr[0] + "." + strArr[1];
      } else {
        // 不带小数点， 首位去0
        if (this.value[1] && this.value[1] != "." && this.value[0] == "0")
          this.value = this.value.substr(1);
        // 不带小数，最多七位
        if (this.value.length > 7) this.value = this.value.substring(0, 7);
      }
    },
  },
  methods: {
    async payment() {
      if (this.value.indexOf(".") > -1) {
        let arr = this.value.split(".");
        if (arr[1].length == 0) {
          this.value = arr[0];
        }
      }

      let amount = Number(this.value || 0);
      if (amount == 0) {
        this.$toast("请输入金额");
        return;
      }

      let data = {
        fee: Number(this.value),
        payType: this.payMethod,
      };

      this.$bus.$emit("loading");
      let res = await this.post("/uniqr", data);
      this.$bus.$emit("hideloading");
      if (res.url) {
        window.location = res.url;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.merchant {
  .top {
    margin-top: 0.3rem;
    p {
      padding: 0.3rem;
      img {
        width: 0.88rem;
        height: 0.88rem;
      }
    }
    span {
      &:last-child {
        margin-top: 0.1rem;
      }
    }
  }
  .input {
    position: relative;
    background: #fff;
    margin: 0.3rem;
    padding: 0 0.2rem;
    height: 1.5rem;
    border-radius: 0.1rem;
    b {
      margin-right: 0.1rem;
    }
    p {
      position: absolute;
      right: 0;
      z-index: 1;
      width: .8rem;
      height:1.5rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
  .title {
    margin-top: 0.5rem;
    padding: 0 0.4rem;
  }
  .bank {
    margin: 0 0.3rem;
    margin-top: 0.3rem;
    border-radius: 0.1rem;
    background: #fff;
    p {
      padding: 0.3rem;
      img {
        width: 0.66rem;
        height: 0.66rem;
      }
    }
    span {
      &:last-child {
        margin-top: 0.1rem;
      }
    }
    div {
      img {
        width: 0.4rem;
        margin: 0 0.3rem;
      }
    }
  }
  .btn {
    width: 6.9rem;
    height: 0.88rem;
    border-radius: 0.1rem;
    margin: 0.8rem auto;
    background: #1989fa;
    border: 1px solid #1989fa;
  }
  .foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.3rem;
  }
}
</style>